.skillDrawer {
  min-height: calc(38% - 16px);
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background-color: rgb(108, 159, 178);
  color: rgb(198, 231, 220);
  border-radius: 16px;
  padding: 8px;
  transform: translateY(110%);
  z-index: 1;
}

.skillDrawerIcon {
  min-width: 30px;
  background-color: rgb(164, 214, 211);
  color: rgb(0, 65, 117);
  border-radius: 8px;
  padding: 0 4px;
  margin-left: 4px;
  text-align: center;
}

.closeIcon {
  min-width: 16px;
  background: linear-gradient(to right, rgb(214, 110, 109), rgb(226, 162, 127)) !important;
  color: rgb(0, 65, 117);
  border-radius: 50%;
  padding: 0 4px;
  margin-left: 4px;
  text-align: center;
}

.row {
  div {
    width: 50%;
  }
}

.fixed {
  color: var(--warning-color);
}

.levelRow {
  align-items: center;
}

.level {
  text-align: center;
  width: 30px;
  padding: 4px;
  background: rgb(164, 214, 211);
}

.activeLevel {
  background: linear-gradient(to right, rgb(214, 110, 109), rgb(226, 162, 127)) !important;
}